import { useState } from "react";

import openImg from '../assets/open.png';
import closeImg from '../assets/close.png';
import exportImg from '../assets/export.png';

export default function Sidebar(props) {
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div
      className={`absolute left-0 top-0 flex flex-col bg-gray-100/50 backdrop-blur-sm transition-all duration-300

        ${isCollapsed ? 'w-12 h-12' : 'w-16 h-full'} overflow-hidden`}
    >
      <div className="flex flex-col items-center px-2 py-4 border-b border-gray-200" onClick={() => setIsCollapsed(!isCollapsed)}>
        <img  className="w-4 h-4 flex-shrink-0"  src={!isCollapsed ? closeImg : openImg} />
        {/* {!isCollapsed && (
          <span className="text-xs ml-1 truncate">
            按键配置
          </span>
        )} */}
      </div>
      <div className="flex-grow overflow-y-auto space-y-1">
        {props.list.map((btn, index) => {
          return (
            <div
              key={index}
              className="mb-1 flex flex-col items-center justify-center cursor-pointer h-16"
              onClick={btn.clickHandler}
            >
              <img className="w-6 mb-1" src={btn.icon} />
              {!isCollapsed && (
                <span className=" text-xs font-semibold  text-gray-900">
                  {btn.name}
                </span>
              )}
            </div>
          );
        })}
      </div>
      <div
        onClick={props.generateConfig}
        className="mb-4 flex items-center flex-col cursor-pointer"
      >
        <img className="max-w-6 mb-1" src={exportImg} />
        {!isCollapsed && (
          <span className=" text-xs font-semibold  text-gray-900">保存</span>
        )}
      </div>
    </div>
  );
}
